---
title: "Ring Width"
description: "Utilities for creating outline rings with box-shadows."
---

import plugin from 'tailwindcss/lib/plugins/ringWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  filterRules: ([selector]) => {
    return selector.startsWith('.')
  },
  transformProperties: ({ selector, properties }) => {
    if (selector === '.ring-inset') {
      return {'--tw-ring-inset': 'inset'}
    }
    delete properties['--tw-ring-inset']
    delete properties['--tw-ring-offset-width']
    delete properties['--tw-ring-offset-color']
    delete properties['--tw-ring-color']
    delete properties['--tw-ring-offset-shadow']
    delete properties['box-shadow']
    properties['box-shadow'] = properties['--tw-ring-shadow']
    delete properties['--tw-ring-shadow']
    return properties
  },
  sort: (classes) => {
    return [...classes].sort((a, b) => {
      a = a === '.ring' ? '.ring-3' : a
      b = b === '.ring' ? '.ring-3' : b
      if (a < b) return -1
      if (b < a) return 1
      return 0
    })
  }
}


## Usage

Use the `ring-{width}` utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

```html lightBlue
<template preview class="grid grid-cols-1 sm:grid-cols-4 gap-6 justify-items-center p-8">
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-0">
    ring-0
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-2">
    ring-2
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring">
    ring
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4">
    ring-4
  </button>
</template>

<button class="... **ring-0**">ring-0</button>
<button class="... **ring-2**">ring-2</button>
<button class="... **ring**">ring</button>
<button class="... **ring-4**">ring-4</button>
```

Ring utilities compose gracefully with regular `shadow-{size}` utilities and can be combined on the same element.

You can also control the color, opacity, and offset of rings using the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), and [ringOffsetWidth](/docs/ring-offset-width) utilities.

### Focus rings

The `focus` variant is enabled for `ring-{width}` utilities by default, which makes it easy to use them for custom focus styles by adding `focus:` to the beginning of any `ring-{width}` utility.

```html emerald
<template preview class="flex space-x-6 justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-emerald-500 focus:outline-none">
    Unfocused
  </button>
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-emerald-500 ring-4 ring-emerald-500 ring-opacity-50 focus:outline-none">
    Focused
  </button>
</template>

<button class="... focus:outline-none **focus:ring-4** focus:ring-green-500 focus:ring-opacity-50">
  Button
</button>
```

The `focus` variant is enabled by default for the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), [ringOffsetWidth](/docs/ring-offset-width), and [ringOffsetColor](/docs/ring-offset-color) utilities as well.

### Inset rings

Use the `ring-inset` utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible.

```html fuchsia
<template preview class="flex space-x-6 justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-pink-500 ring-4 ring-pink-300">
    Default
  </button>
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-pink-500 ring-4 ring-pink-300 ring-inset">
    Inset
  </button>
</template>

<button class="... ring-4 ring-pink-300">
  Default
</button>

<button class="... ring-4 ring-pink-300 **ring-inset**">
  Inset
</button>
```

---


## Responsive

To control the ring width at a specific breakpoint, add a `{screen}:` prefix to any existing ring width utility. For example, use `md:ring-4` to apply the `ring-4` utility at only medium screen sizes and above.

```html
<button class="ring-2 **md:ring-4**">
  <!-- ... -->
</button>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

---

## Customizing

To customize which ring width utilities are generated, add your custom values under `ringWidth` key in the `theme` section of your `tailwind.config.js` file. You can use the `DEFAULT` key to specify which width is used for the plain `ring` utility.

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringWidth: {
        'DEFAULT': '2px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="ringWidth" />

### Disabling

<Disabling plugin="ringWidth" />
